import {provice} from "../city/cdata";
import {animate} from "../city/animate";
import {getElement} from '../networkutils.js'


var focus = getElement('focus');
var province = getElement('province');
var city = getElement('city');
var area = getElement('area');
var inner = getElement('inner');
var outer = getElement('outer');
var mask = getElement('mask');
var companyAddress = getElement('company__address');
var wid = outer.clientWidth;
var step = 0;
var focusList;
var areaArr;
var cityArr;
var cityItem;
var index;
var cityIndex;
var cityName;
let areaText;
var ModalHelper = (function (bodyCls) {
    var scrollTop;
    return {
        afterOpen: function () {
            // scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
        },
        beforeClose: function () {
            document.body.classList.remove(bodyCls);
            // scrollTop lost after set position:fixed, restore it back.
            // document.scrollingElement.scrollTop = scrollTop;
        }
    };
})('open-model');
//获取省
function getProvince(provice) {
    let arrProvice = [];
    for (var i = 0; i < provice.length; i++) {
        var itemProvice = provice[i];
        arrProvice.push(itemProvice.name)
    }
    return arrProvice
}

let arrProvice = getProvince(provice);

//动态插入省数据
function bindProvince(arrProvice) {
    let str = "";
    for (var i = 0; i < arrProvice.length; i++) {
        var item = arrProvice[i];
        str += `<li><span>${item}</span><div></div></li>`
    }
    province.innerHTML = str;
    var provinceLiArr = province.getElementsByTagName('li');
    bindprovinceLiEvent(provinceLiArr);
    cityArr = city.getElementsByTagName("li");
}

bindProvince(arrProvice);

//绑定省事件
function bindprovinceLiEvent(provinceLiArr) {
    for (var i = 0; i < provinceLiArr.length; i++) {
        provinceLiArr[i].j = i;
        provinceLiArr[i].onclick = function () {
            index = this.j;
            var oDivs = province.getElementsByTagName('div');
            changeIndex(provinceLiArr, index, oDivs);
            let cityA = provice[this.j].city;
            let cityAr = [];
            for (var h = 0; h < cityA.length; h++) {
                var item = cityA[h].name;
                cityAr.push(item)
            }
            let str = "";
            for (var k = 0; k < cityAr.length; k++) {
                var itemCity = cityAr[k];
                str += `<li><span>${itemCity}</span><div></div></li>`
            }
            city.innerHTML = str;
            cityItem = provice[this.j].name;
            focus.innerHTML = `<li>${provice[this.j].name}</li><li class="select" id="choose">请选择</li>`
            focusList = focus.getElementsByTagName('li');
            // 焦点选中状态控制
            bindEvent();
            bindCityEvent(cityArr);
            autoMove(1);
        }
    }
}

//绑定市事件
function bindCityEvent(arr) {
    for (var i = 0; i < arr.length; i++) {
        var itemArea = arr[i];
        itemArea.j = i;
        itemArea.onclick = function () {
            cityIndex = this.j;
            var oDivs = city.getElementsByTagName('div');
            changeIndex(arr, cityIndex, oDivs);
            let areaA = provice[index].city[this.j].districtAndCounty;
            var str = '';
            for (var k = 0; k < areaA.length; k++) {
                var itemAreaA = areaA[k];
                str += `<li><span>${itemAreaA}</span><div></div></li>`
            }
            cityName = provice[index].city[this.j].name;
            focus.innerHTML = `<li>${cityItem}</li><li>${cityName}</li><li class="select" id="choose">请选择</li>`
            area.innerHTML = str;

            areaArr = area.getElementsByTagName("li");
            autoMove(2);
            bindEvent();
            areaEvent(areaArr)
        }
    }
}

//绑定区事件
function areaEvent(areaArr) {
    for (var i = 0; i < areaArr.length; i++) {
        var itemArea = areaArr[i];
        itemArea.j = i;
        itemArea.onclick = function () {
            var index = this.j;
            var oDivs = area.getElementsByTagName('div');
            var oSpans = area.getElementsByTagName('span');
            changeIndex(areaArr, index, oDivs);
            areaText = oSpans[this.j].innerHTML;
            companyAddress.value = `${cityItem}/${cityName}/${areaText}`;
            outer.style.bottom = "-8rem";
            ModalHelper.beforeClose();
            mask.style.cssText = "display: none;";
        }
    }
}

function autoMove(n) {
    !isNaN(n) ? step = n : step++;
    animate({
        ele: inner,
        target: {
            left: step * -wid
        },
        effect: ["Linear"],
        duration: 300,
    });
    changeBg(step) // 控制焦点选中状态
}

function changeBg(n) {
    for (var j = 0; j < focusList.length; j++) {
        j === n ? focusList[j].className = 'select' : focusList[j].className = ''
    }
}

function bindEvent() {
    for (var i = 0; i < focusList.length; i++) {
        var cur = focusList[i];
        cur.n = i;
        cur.onclick = function () {
            autoMove(this.n);
        }
    }
}

//li点击标识出现
function changeIndex(arr, index, oDivs) {
    for (var s = 0; s < arr.length; s++) {
        var item = arr[s];
        if (index == s) {
            item.className = "active";
            oDivs[s].className = "div"
        } else {
            item.className = "";
            oDivs[s].className = ""
        }
    }
}

export {
    cityItem,
    cityName,
    areaText,
}


